<template>
  <div>
    <div class="listDataItem" v-for="(item, index) in listData" :key="'Warfare' + index">
      <!-- 病毒名称行，点击展开 -->
      <div class="virus_name_line">
        <div class="listDataContentBox">{{ index + 1 }}、{{ item.recatname }}</div>
        <div class="virus_name_operation">
          <span v-show="showUpLoad" class="operation_btn arrowBtn" @click="handleArrowChange(item, index)"></span>
          <span class="operation_btn deleteBtn" @click="handleDelete(item)"></span>
          <span class="operation_btn editBtn" @click="handleEdit(item)"></span>
          <span v-show="showUpLoad" class="operation_btn upShelveBtn" @click="handleUpShelves(item)"></span>
        </div>
      </div>
      <!-- 病毒展开项 -->
      <div class="virus_expand" v-show="item.showDetail">
        <div class="virus_field_title">
          <div class="virus_expand_title">详情</div>
          <div class="virus_detail_operate">
            <span class="operation_btn arrowBtn" @click="openSummaryList()"></span>
            <span class="operation_btn addBtn" @click="virusSummaryAdd(item.recatid,item.recatname)"></span>
          </div>
        </div>
        <div v-show="isOpenSummaryList == true">
          <div class="virus_field_list">
            <div class="virus_field_list_item virus_list_item" v-for="(dItem, dIndex) in listSummaryData" :key="'field' + dIndex">
              <div class="virus_field_list_item_name">{{ dItem.title }}</div>
              <div class="virus_detail_operate virus_list_operate">
                <span class="operation_btn editBtn" @click="virusSummaryEdit(dItem.id,dItem.vir_name)"></span>
                <span class="operation_btn deleteBtn" @click="deleteVirusSummaryData(dItem.id)"></span>
              </div>
            </div>
          </div>
        </div>


        <div class="virus_image_title" v-show="item.showDetail">
          <div class="virus_expand_title">图片列表</div>
          <div class="virus_detail_operate">
            <span class="operation_btn arrowBtn" @click="openPicList()"></span>
            <span class="operation_btn addBtn" @click="virusPicAdd(item.recatid,item.recatname)"></span>
          </div>
        </div>

        <div class="virus_image_list" v-show="isOpenPicList == true">
          <div class="virus_image_list_item virus_list_item" v-for="(dItem, dIndex) in listPicData" :key="'pic' + dIndex">
            <div class="virus_field_list_item_name">{{ dItem.title }}</div>
            <div class="virus_detail_operate virus_list_operate">
              <span class="operation_btn editBtn" @click="virusPicEdit(dItem.id)"></span>
              <span class="operation_btn deleteBtn" @click="deleteVirusPicData(dItem.id)"></span>
            </div>
          </div>
        </div>


      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    listData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    listSummaryData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    listPicData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    showUpLoad: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      isOpenSummaryList: false,
      isOpenPicList: false,
    };
  },
  methods: {
    /**
     * @description 列表按钮点击事件
     * @param { }
     * @return { }
     */
    handleDelete(item) {
      this.$emit("handleDelete", { item: item, com: 1 });
    },
    handleEdit(item) {
      let routeName = this.$route.path;
      if(routeName == '/data/reagent/virus'){
        this.$emit("handleEdit", { item: item, com: 1 ,type: 'virus'});
      }
      if(routeName == '/data/reagent/germ'){
        this.$emit("handleEdit", { item: item, com: 1 ,type: 'germ'});
      }
      if(routeName == '/data/reagent/rickettsiite'){
        this.$emit("handleEdit", { item: item, com: 1 ,type: 'rickettsiite'});
      }
      if(routeName == '/data/reagent/fungus'){
        this.$emit("handleEdit", { item: item, com: 1 ,type: 'fungus'});
      }
      if(routeName == '/data/reagent/poison'){
        this.$emit("handleEdit", { item: item, com: 1 ,type: 'poison'});
      }
    },
    handleUpShelves(item) {
      this.$emit("handleUpShelves", { item: item, com: 1 });
    },
    handleArrowChange(item, index) {
      this.isOpenSummaryList = false
      this.isOpenPicList = false
      this.$emit("changeShow", { vid:item.recatid, index: index});
    },
    virusSummaryAdd(vid,vname){
      this.$router.push({path:'/data/reagent/VirusSummaryAdd',query:{vid:vid,vname:vname}});
    },
    virusSummaryEdit(vsid,vname){
      this.$router.push({path:'/data/reagent/VirusSummaryEdit',query:{vsid:vsid,vname:vname}});
    },
    openSummaryList(){
      if(this.isOpenSummaryList == true){
        this.isOpenSummaryList = false
      }else{
        this.isOpenSummaryList = true
      }
    },
    openPicList(){
      if(this.isOpenPicList == true){
        this.isOpenPicList = false
      }else{
        this.isOpenPicList = true
      }
    },
    deleteVirusSummaryData(id) {
      this.$emit("deleteVirusSummaryData", { id: id });
    },
    deleteVirusPicData(id) {
      this.$emit("deleteVirusPicData", { id: id });
    },
    virusPicAdd(vid,vname){
      this.$router.push({path:'/data/reagent/VirusPicAdd',query:{vid:vid,vname:vname}});
    },
    virusPicEdit(vsid,vname){
      this.$router.push({path:'/data/reagent/VirusPicEdit',query:{vsid:vsid,vname:vname}});
    },
  },
};
</script>
<style scoped>
/* 病毒名称行 */
.virus_name_line {
  height: 56px;
  margin-top: 4px;
  padding-right: 64px;
  background-color: #cfe0f5;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}
.listDataContentBox {
  padding-left: 56px;
  padding-right: 56px;
  flex: 1;
  width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 病毒名称行操作区 */
.virus_name_operation {
  flex-shrink: 0;
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  justify-content: start;
  align-items: center;
  width: 160px;
}
.operation_btn {
  width: 20px;
  height: 20px;
  margin-left: 20px;
  background-size: cover;
  background-repeat: no-repeat;
}
.upShelveBtn {
  background-image: url("../../assets/image/up_load.png");
}
.editBtn {
  background-image: url("../../assets/image/edit.png");
}
.deleteBtn {
  background-image: url("../../assets/image/delete.png");
}
.arrowBtn {
  background-image: url("../../assets/image/down_arrow.png");
}
.addBtn {
  background-image: url("../../assets/image/add.png");
}

.virus_field_title,
.virus_image_title {
  height: 56px;
  margin-top: 4px;
  padding-right: 24px;
  background-color: #cfe0f5;
  background-color: #CCCCCC;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}
.virus_expand_title {
  margin-left: 80px;
  flex: 1;
  width: 0;
}
.virus_detail_operate {
  display: flex;
  flex-wrap: nowrap;
}

.virus_field_list_item,
.virus_image_list_item {
  height: 56px;
  padding-right: 24px;
  background-color: #f7fafb;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}
.virus_field_list_item_name {
  margin-left: 80px;
}
.virus_list_item {
  padding-right: 104px;
}
.virus_list_operate {
  width: 80px;
}
</style>